﻿@{
    ViewBag.Title = "文件系统";
}
@using System.Text;
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.3.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.3.min.js"></script>
<script src="~/signalr/hubs"></script>
<style>
    ul {
        position: absolute;
        width: 100%;
        top: 10%;
        height: 68%;
        overflow-y: auto;
    }

    body {
        overflow: hidden;
    }

    .block-div {
        display: inline-block;
        padding: 10px 15px;
    }
</style>
<main style="padding:20px 50px;">



    <div class="text-center">
        <ul id="ul">
            <li>
                <div class="row">
                    <h1 id="gettingStartedTitle" style="font-size:41px;"> ASP.NET MVC   欢迎访问聊天室</h1>
                </div>

                @*<div class="layui-row">
                        <span class='layui-panel layui-btn-radius layui-btn-xs' style='padding:5px;'></span>
                    </div>*@
            </li>
            @foreach (var item in Model.Items)
            {
                <li>

                    <fieldset class="layui-elem-field layui-field-title"><legend>@item.Name</legend></fieldset>
                    <div class="layui-btn-radius layui-panel block-div">
                        @Html.Raw(item?.Text?.Replace("\n", "<br>"))

                        <span class='layui-btn-primary layui-btn-radius layui-btn-xs' style=' margin-left:20px;'>@item.Time</span>
                    </div>
                </li>
            }
            <li style="position: fixed; display: flex; justify-content: center; width:100%; bottom: 20%;">
                <div class="layui-box layui-laypage layui-laypage-default">
                    @Pager(Model.TotalPages, Model.PageIndex, Model.PageSize, new Func<int, string>(pageIndex => Url.Action("Index", new { pageIndex })))
                </div>

            </li>
        </ul>

        <div style="position: absolute; width: 100%; bottom: 0;">

            <div class="layui-form layui-form-pane">

                <div class="layui-form-item layui-form-text">
                    <div style="display: flex; width: 95%;">
                        <label class="layui-form-label">发送内容：</label>
                        <button type="submit" class="layui-btn" id="send" lay-submit lay-filter="demo1">立即提交</button>
                    </div>
                    <div class="layui-input-block" style="width:95%">
                        <textarea placeholder="请输入内容" id="msg" class="layui-textarea"></textarea>
                    </div>

                </div>
            </div>
        </div>

    </div>
</main>
@{
    MvcHtmlString Pager(int totalPages, int currentPage, int pageSize, Func<int, string> pageUrl, int maxPagesToShow = 5)
    {
        StringBuilder sb = new StringBuilder();
        if (currentPage > 1)
        {
            sb.Append(string.Format("<a class='layui-laypage-prev' href='{0}'>&lt;</a>", pageUrl(currentPage - 1)));
        }

        int startPage = Math.Max(currentPage - (maxPagesToShow / 2), 1);
        int endPage = Math.Min(startPage + maxPagesToShow - 1, totalPages);

        for (int i = startPage; i <= endPage; i++)
        {
            if (i == currentPage)
            {
                sb.Append(string.Format("<span class='layui-laypage-curr'><em class='layui-laypage-em'></em><em>{0}</em></span>", i));
            }
            else
            {
                sb.Append(string.Format("<a href='{0}'>{1}</a>", pageUrl(i), i));
            }
        }

        if (currentPage < totalPages)
        {
            sb.Append(string.Format("<a class='layui-laypage-next' href='{0}'>&gt;</a>", pageUrl(currentPage + 1)));
        }
        return MvcHtmlString.Create(sb.ToString());
    }
}

<script>

    var chatHub = $.connection.chatHub;
    chatHub.client.receiveMessage = function (user, message) {
        var li = $("<li ></li>");
        var currentTime = new Date().toLocaleTimeString(); // 获取当前时间
        var text = `<fieldset class="layui-elem-field layui-field-title"><legend>` + user + `</legend></fieldset> <div class="layui-btn-radius layui-panel block-div">` + message.replace(/\n/g, "<br>") + " <span class='layui-btn-primary layui-btn-radius layui-btn-xs' style=' margin-left:20px;'>" + currentTime +"</span></div>";

        // 将text添加到li元素中
        li.html(text);
        $("#ul").append(li);
        //console.log(user + ": " + message);
    };

    $.connection.hub.start();

    $("#send").on("click", function () {
        var msg = $("#msg").val();
        var user = '@WebApplicationFileSys.Models.LoginMode.username';
        var currentTime = new Date().toLocaleTimeString();
        mode = {
            Name: user,
            Time: currentTime,
            Text:msg
        }
        axios.post("/Chat/Add", mode)
            .then(d => {
                console.log(d.data.Msg); // 响应数据
            })
            .catch(error => {
                console.error(error); // 错误信息
            });

        chatHub.invoke("Send", user, msg);
        $("#msg").val("");
        var chatMessages = $("#ul");
        var scrollHeight = chatMessages.prop("scrollHeight");
        chatMessages.animate({ scrollTop: scrollHeight }, 500);
    })

    document.getElementById("msg").addEventListener("keydown", function (event) {
        if (event.keyCode === 13) { // 按下回车键的键码是13
            event.preventDefault(); // 阻止默认的回车行为
            document.getElementById("send").click(); // 模拟点击发送按钮
        }
    });
</script>